<template>
	<view>
		<scroll-view class="shopListBox" scroll-y="true" @scrolltolower="lower">
			<view class="shopList" v-for="(item,index) in goodsList" :style="index == goodsList.length - 1 ? 'border-bottom:0;':''" @click="goto" :data-url="'/pagesZ/goodsPage/uploadGoods?bid='+bid+'&id='+item.id+''">
				<image :src="item.pics[0].image" mode="aspectFill"></image>
				<view class="shopContent">
					<view class="shopName">{{item.name}}</view>
					<view>
						<text style="color:#FC4C48;font-weight: bold;font-size:30rpx;">￥{{item.sell_price}}</text>
						<text class="originPrice">￥{{item.market_price}}</text>
					</view>
					<view>
						<text>商品状态：</text>
						<text class="sell" v-show="item.upper_status == 1">上架</text>
						<text class="unsold" v-show="item.upper_status == 0">下架</text>
						<text class="Auditing" v-show="item.status == 0">待审核</text>
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="addGoods" @click="goto" :data-url="'/pagesZ/goodsPage/uploadGoods?bid='+bid">添加商品</view>
		<loading v-if="loading"></loading>
	</view>
</template>
<script>
	var app = getApp();
	export default {
		data() {
			return {
				loading:true,
				page:1,//当前页
				pageSize:10,//每页数量
				goodsList:[],//商品list
				bid:0,//商铺ID
				last_page:0,//总页数
			}
		},

		onShow() {
			this.page = 1;
			this.goodsList = [];
			this.getDataFun();
		},

		methods: {
			getDataFun(){
				let _this = this;
				app.get("ApiBusinessProduct/list", {page:_this.page,pagesize:_this.pageSize}, function (res) {
					_this.loading = false;
					if (res.status == 0) {
						app.alert(res.msg);
					}else{
						_this.bid = res.data.bid;
						_this.last_page = res.data.last_page;
						let list = res.data.data;
						list.forEach(item=>{
							_this.goodsList.push(item);
						})
					}
				});
			},
			
			//触底事件
			lower(){
				if (this.page < this.last_page) {
					this.page++;
					this.getDataFun();
				}
			},
		}
	}
</script>

<style lang="less">
	
	page{
		background-color: #f3f3f3;
	}
	
	.originPrice {
		text-decoration: line-through;
		margin-left:20rpx;
	}
	
	.sell{
		background-color: #FC4C48;
		padding:5rpx 20rpx;
		border-radius:7rpx;
		color:#fff;
	}
	
	.unsold{
		background-color: #afafaf;
		padding:5rpx 20rpx;
		border-radius:7rpx;
		color:#fff;
	}
	
	.Auditing{
		background-color: #00aaff;
		padding:5rpx 20rpx;
		border-radius:7rpx;
		color:#fff;
		margin-left:20rpx;
	}
	
	.shopListBox{
		width:94%;
		float: left;
		margin:0 3%;
		height: calc(100vh - 140rpx);
	}
	
	.shopList{
		width:100%;
		float:left;
		background-color: #fff;
		margin-top:25rpx;
		padding:20rpx;
		display: flex;
		align-items: center;
		border-radius:10rpx;
	}
	
	.shopAddress{
		width:100%;
		display: flex;
		justify-content:space-between;
	}
	
	.shopAddress view{
		width:80%;
		float:left;
		overflow: hidden; //超出文本隐藏
		text-overflow: ellipsis; //溢出使用省略号显示
		white-space: nowrap; // 默认不换行；
	}
	
	.shopList image{
		width:150rpx;
		height:120rpx;
		border-radius:10rpx;
	}
	
	.shopContent{
		width: calc(100% - 210rpx);
		float:left;
		margin-left:20rpx;
		font-size:26rpx;
		color:#939393;
		line-height: 50rpx;
	}
	
	.shopName{
		font-weight: bold;
		color:#000;
		font-size:28rpx;
	}
	
	.scoreBox{
		display: flex;
		align-items:center;
	}
	
	.scoreBox text{
		padding:3rpx 15rpx;
		background-color: red;
		color:#fff;
		margin-right: 10rpx;
	}
	
	.scoreBox image{
		width:140rpx;
		height:50rpx;
	}
	
	.addGoods {
		width: 90%;
		position: fixed;
		left: 5%;
		bottom: 30rpx;
		line-height: 80rpx;
		background-color: #FC4C48;
		font-weight: bold;
		font-size: 28rpx;
		color: #fff;
		border-radius: 50px;
		text-align: center;
	}
</style>